<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/public.css" />
    <style>
       #content {
		width: 100%;
		height: 100vh;
		background-color: #f3f3f3;
	}

	.peopleBox,
	.getMoney {
		width: 100%;
		padding-top: 20px;
	}

	.peopleBox .top,
	.getMoney .top {
		width: calc(100% - 20px);
		height: 45px;

	}

	.peopleBox .top input,
	.getMoney .top input {
		width: 50%;
		height: 30px;
		background-color: #FFF;
		padding-left: 10px;
		border-radius: 8px;
	}

	.peopleBox .search,
	.getMoney .search {
		height: 30px;
		padding-left: 10px;
		padding-right: 10px;
		color: #FFF;
		font-size: 13px;
		line-height: 30px;
		background-color: #FF2265;
		border-radius: 8px;
	}

	.peopleBox .reset,
	.getMoney .reset {
		height: 30px;
		padding-left: 10px;
		padding-right: 10px;
		line-height: 30px;
		color: #FFF;
		font-size: 13px;
		background-color: #8F9DCC;
		border-radius: 8px;
	}
	.getMoneyBot {
		width: 100%;
		margin-top: 10px;
	}

	.getMoneyBot_top {
		width: calc(100% - 30px);
		padding: 10px 15px;
		height: 30px;
		font-size: 12px;
		color: #333333;
	}
	.getMoneyBot_top .FLeft {
		width: 55%;
	}
	.getMoneyBot_top .one {
		padding: 5px 10px;
		background-color: #FFF;
		border-radius: 8px;
		font-size: 12px;
	}

	.getMoneyBot_top .one img {
		width: 10px;
		height: 5px;
		margin-left: 5px;
	}

	.getMoneyBot_bot {
		width: 100%;
		margin-top: 10px;
	}

	.getMoneyBot_bot .oneBot {
		width: calc(100% - 30px);
		
		padding: 10px 15px;
		border-bottom: 1px solid #E2E2E2;
		font-size: 12px;
		color: #999999;
		background-color: #FFF;
	}

	.getMoneyBot_bot .oneBot .left p {
		width: calc(100% - 50px);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.getMoneyBot_bot .oneBot .left {
		width: 40%;
		height: 100%;

	}

	.getMoneyBot_bot .oneBot .left img {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		margin-right: 5px;
	}

	.getMoneyBot_bot .oneBot .middle {
		width: 30%;
		height: 100%;
		color: #7489A6;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.getMoneyBot_bot .oneBot .right {
		width: 30%;
		height: 100%;
	}

	.oneBot .right .right_l {
		width: 80%;
		height: 100%;
		font-size: 10px;
	}
	.null {
		width: 120px;
		height: 100px;
		position: absolute;
		top: 125px;
		left: 50%;
		transform: translate(-50%, 100px);
	}

	.null img {
		width: 100%;
		height: 80px;
		margin-bottom: 10px;
	}

	.null p {
		font-size: 17px;
		color: #DDDDDD;
		font-weight: bold;
	}
    </style>
</head>

<body>
    <div id="content">
		
		<div class="peopleBox flex_column">
			<div class="top flex_around">
				<input type="number" placeholder="输入成员ID" class="uid">
				<div class="search" onclick="search()">
					搜索
				</div>
				<div class="reset" onclick="chongzhi()">
					重置
				</div>
			</div>

			<div class="getMoneyBot flex_column">
				<div class="getMoneyBot_top flex_around">
					<div class="one flex">
						<p id="daydata">{{daydata}}</p>
						<img src="../image/img/invite/bott.png" alt="">
					</div>
					<div class="one flex">
						<p onclick="_ziji()">{{ziji[0].name}}</p>
						<img src="../image/img/invite/bott.png" alt="">
					</div>
					<div class="one flex" onclick="daochu()">
						<p>导出数据</p>
						<img src="../image/img/invite/xia.png" alt="">
					</div>
				</div>
				<div class="null flex_column_center" v-if="!dataarr.length">
					<img src="../image/img/invite/null.png" alt="">
					<p>暂无数据</p>
				</div>
				<div class="getMoneyBot_bot flex_column" v-if="dataarr.length">
					<div class="oneBot flex_around" v-for="(m, index) in dataarr" @click="_url({url:'daili_xiangqing',title:'成员详情', moreTitle: '去邀请',id:m.id})">
						<div class="left flex">
							<img :src="returnImg(m.head)" alt="" onerror="this.src='../image/touxiang.png'">
							<p style="font-weight: 500;font-size: 12px;color: #333333;">{{m.name}}</p>
						</div>
						<div class="middle" v-if="ziji[0].id==0">
							好友:{{m.name}}
						</div>
						<div class="middle" v-else>
							好友:{{user.name}}
						</div>
						<div class="right flex_between">
							<div class="right_l flex_column_center">
								<p>{{m.money}}</p>
								<p>当前收益(积分)</p>
							</div>
							<img src="../image/img/arrow_r.png" alt="" style="width: 8px;height: 15px;">
						</div>
					</div>
					
				</div>
			</div>


		</div>







	</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/jquery.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="../script/ffkj.js"></script>
<script type="text/javascript" src="../script/update.js"></script>
<script type="text/javascript" src="../script/swiper.js"></script>
<script type="text/javascript" src="../script/jdate.min.js"></script>
<script src="../script/select_json.js"></script>
<script type="text/javascript" src="../json/imglist.js"></script>
<script type="text/javascript" src="../json/user.js"></script>
<script type="text/javascript" src="../json/rw.js"></script>
<script type="text/javascript">
    var userid;
    var view = new Vue({
        el: '#content',
        data: {
			ziji:[{"name":'好友',"id":0}],
			daydata:'',
			dataarr:[],
			user:[],

        },
        methods: {
			returnImg(url) {
                return returnImg(url);
            },
			_url(param, url) {
                _url(param, url);
            },
        }
    });

    apiready = function() {
        view.ios = $api.getStorage('shang');
        userid = $api.getStorage('userid');
    	view.user=$api.getStorage('user');

		var dat=new Date()
		var year = dat.getFullYear();
		var mon = (dat.getMonth()+1) < 10 ? "0"+(dat.getMonth()+1) : dat.getMonth()+1;
		var data = dat.getDate()  < 10 ? "0"+(dat.getDate()) : dat.getDate();
		view.daydata=year +"-"+ mon +"-"+ data

		
			new Jdate({
				el: '#daydata',
				format: 'YYYY-MM-DD',
				beginYear: 2000,
				endYear: 2100,
				confirm: function(date) {
					view.daydata=date
					_daydata()
				}
			})
		_daydata()


    };

	

	function _ziji(){
		var path=[{"name":'好友',"id":0},{"name":view.user.name,"id":1}];
		openUIActionSelector(path, {
        col: 1,
        title: '对象'
    }, function (ret, err) {
        console.log(JSON.stringify(ret))
		if(ret.eventType=='ok'){
		view.ziji=ret.selectedInfo
		_daydata()
		}
	})
	}
	
	function _daydata() {
        _ajax('api/User/shouru', function(ret, err) {
            if (ret && ret.data) {
				view.dataarr=ret.data
            }else{
				_msg(ret.msg)
			}
        },{
			user_id: $api.getStorage('userid'),
			user:view.ziji[0].id,
			day:view.daydata,
		})
    }
	function chongzhi(){
		$(".uid").val('');
	}
	function search(){
		var uid=$(".uid").val();

		_url({url:'daili_xiangqing',title:'成员详情', moreTitle: '去邀请',id:uid})
	}
	function daochu() {
		var perArr = api.systemType != 'ios' ? ['photos', 'storage'] : ['photos'] // 相机 相册 存储
		getPermission(perArr, function(code) {
			// 1权限未开启 0权限已开启
			if (code != 0) {
				_msg('请先开启存储权限');
			} else {
				_ajax('api/User/daochu', function(ret, err) {
					if (ret && ret.code==200) {
						api.download({
						savePath: 'fs://download/' + view.daydata+'.csv',
						url: ret.msg,
						allowResume: true,
						}, function(ret, err) {
							console.log(JSON.stringify(ret))
							if (ret.state == 1) {
								_msg('导出成功'+ret.savePath)
							} else {
								_msg('导出失败')
							}
						});
						return
					}else{
						_msg(ret.msg)
					}
				},{
					user_id: $api.getStorage('userid'),
					user:view.ziji[0].id,
					day:view.daydata,
				})
			}
		})












        
    }
</script>

</html>